<template>
	<view class="">
		<view class="page d-flex flex-column j-center bz px-3" :style="'background:url('+background+');background-size:100%,100%;'" style="background-size: 100% 100%;">
			<view class="bz p-3 b-radius1 bg-white">
				<view class="title pb-2">
					预约服务
				</view>
				<view class="cu-form-group bz p-0" >
					<view class="picker">
							{{name}}
						</view>
				</view>
				<view class="cu-form-group bz p-0" style="border-bottom: 1px solid #E5E5E5;">
					<picker @change="PickerChange" :value="index" :range="picker">
						<view class="picker">
							{{picker[index]}}
						</view>
					</picker>
				</view>
				<view class="d-flex flex-nowrap a-center py-2">
					<view class="date">日期</view>
					<view class=" pl-1">
						<picker mode="date" :value="date" start="2020-09-01" end="2030-09-01" @change="DateChange">
							<view class="picker date_num">
								{{date}}
							</view>
						</picker>
					</view>
				</view>
				<swiper class="card-swiper" :circular="true" indicator-dots="false"
				 :autoplay="false" interval="5000" duration="500" 
				 indicator-active-color="#0081ff">
					<swiper-item style="left:2rpx!important">
						<view>
							<view class="time_list mb-2" v-for="(item,index) in swItemList[0].time" :key="index" @tap="selectServiceTime(0,index)" :class="(serviceTimeIndex==index&&i==selectServicePage?'check':'')+(areadyAppointments.indexOf(item.name)>=0?' check1':'')">{{item.name}}</view>
						</view>
					</swiper-item>
					
					<swiper-item style="left:2rpx!important">
						<view>
							<view class="time_list mb-2" v-for="(item,index) in swItemList[1].time" :key="index" @tap="selectServiceTime(1,index)" :class="(serviceTimeIndex==index&&i==selectServicePage?'check':'')+(areadyAppointments.indexOf(item.name)>=0?' check1':'')">{{item.name}}1</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="b-border">
					<button class="cu-btn lg mt-3" @tap="send">预约</button>
				</view>
			</view>
	</view>
	</view>
</template>

<script>
	export default{ 
		data(){
			return{
				swItemList:[
					{
							'time':[{
							name: '11:30-12:00'
						},
						{
							name: '12:00-12:30'
						},
						{
							name: '12:30-13:00'
						},
						{
							name: '13:00-13:30'
						},
						{
							name: '13:30-14:00'
						},
						{
							name: '14:00-14:30'
						},
						{
							name: '14:30-15:00'
						},{
							name: '15:00-15:30'
						},{
							name: '15:30-16:00'
						},{
							name: '16:00-16:30'
						},{
							name: '16:30-17:00'
						},{
							name: '17:00-17:30'
						}
					]
					},{
						'time':[
							{
									name: '17:30-18:00'
								},{
									name: '18:00-18:30'
								},{
									name: '18:30-19:00'
								},{
									name: '19:00-19:30'
								},{
									name: '19:30-20:00'
								},{
									name: '20:00-20:30'
								},{
									name: '20:30-21:00'
								},{
									name: '21:00-21:30'
								},{
									name: '21:30-22:00'
								},{
									name: '22:00-22:30'
								}
						]
					}
				],
				selectServicePage:-1,
				serviceTimeIndex:-1,
				areadyAppointments:'',
				index: 0,
				picker: [''],
				time: [{
						name: '11:30-12:00'
					},
					{
						name: '12:00-12:30'
					},
					{
						name: '12:30-13:00'
					},
					{
						name: '13:00-13:30'
					},
					{
						name: '13:30-14:00'
					},
					{
						name: '14:00-14:30'
					},
					{
						name: '14:30-15:00'
					},{
						name: '15:00-15:30'
					},{
						name: '15:30-16:00'
					},{
						name: '16:00-16:30'
					},{
						name: '16:30-17:00'
					},{
						name: '17:00-17:30'
					},{
						name: '17:30-18:00'
					},{
						name: '18:00-18:30'
					},{
						name: '18:30-19:00'
					},{
						name: '19:00-19:30'
					},{
						name: '19:30-20:00'
					},{
						name: '20:00-20:30'
					},{
						name: '20:30-21:00'
					},{
						name: '21:00-21:30'
					},{
						name: '21:30-22:00'
					},{
						name: '22:00-22:30'
					}
				],
				checkIndex:-1,
				background:'/static/bg-1.png',
				name:'',
				date: '',
				id:''
			}
		},
		mounted() {
			
		},
		onShow() {
			this.swItemList=[
				{
						'time':[{
						name: '11:30-12:00'
					},
					{
						name: '12:00-12:30'
					},
					{
						name: '12:30-13:00'
					},
					{
						name: '13:00-13:30'
					},
					{
						name: '13:30-14:00'
					},
					{
						name: '14:00-14:30'
					},
					{
						name: '14:30-15:00'
					},{
						name: '15:00-15:30'
					},{
						name: '15:30-16:00'
					},{
						name: '16:00-16:30'
					},{
						name: '16:30-17:00'
					},{
						name: '17:00-17:30'
					}
				]
				},{
					'time':[
						{
								name: '17:30-18:00'
							},{
								name: '18:00-18:30'
							},{
								name: '18:30-19:00'
							},{
								name: '19:00-19:30'
							},{
								name: '19:30-20:00'
							},{
								name: '20:00-20:30'
							},{
								name: '20:30-21:00'
							},{
								name: '21:00-21:30'
							},{
								name: '21:30-22:00'
							},{
								name: '22:00-22:30'
							}
					]
				}
			];
		},
		onLoad(e) {
			 var that = this;
			 // #ifdef  MP-WEIXIN
				let base64 = wx.getFileSystemManager().readFileSync(this.background, 'base64');
				that.background= 'data:image/jpg;base64,' + base64;
			 // #endif
			 var date = new Date();
			 var year=date.getFullYear(); //获取完整的年份(4位)
			 var getMonth=date.getMonth()+1; //获取当前月份(0-11,0代表1月)
			 var getDate=date.getDate()+""; //获取当前日(1-31)
			 this.date=year+'-'+getMonth+'-'+getDate.padStart(2, "0");
			 
			this.id=e.id;
			this.name=e.name;
			this.getServer()
		},
		
		methods:{
			selectServiceTime(i,index) {
				
				if(this.areadyAppointments.indexOf(this.swItemList[i].time[index].name)>-1){
					uni.showToast({
						title: '此时间段已被预约',
						icon: "none"
					});
				}else{
					this.selectServicePage = i;
					this.serviceTimeIndex = index;
				}
			},
			queryAreadyAppointmentList(){
				if(uni.getStorageSync('user')==null || uni.getStorageSync('user')==''){
					uni.showToast({
						title: '请先登录',
						icon: "none"
					});
					
					return;
				}
				
				
				var arr = {
					openId :uni.getStorageSync('user').openId,
					serviceDay: this.date,
					technicianId: this.id
				};
				arr = JSON.stringify(arr)
				this.$http({
					url: '/IWeiXinService.queryAppointmentListBySerivceDay',
					method: 'post',
					data: arr
				}).then((res) => {
					if (res.code == 0) {
						this.areadyAppointments = '';
						for(let i=0;i<res.data.length;i++){
							this.areadyAppointments = this.areadyAppointments + res.data[i].serviceTime.split(' ')[1] + ',';
						}
						console.log(this.areadyAppointments);
					} else if (res.code == '100003') {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
						setTimeout(function() {
							uni.navigateTo({
								url: "/pages/bind_phone/bind_phone"
							});
						}, 1000)
					} else if (res.code == '100004') {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
						// setTimeout(function() {
						// 	uni.navigateTo({
						// 		url: "/pages/login/login"
						// 	})
						// }, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch((err) => {
					console.log(err)
				
				})
			},
			DateChange(e) {
				this.date = e.detail.value
				
				if(this.index!=-1){
					this.queryAreadyAppointmentList();
				}
			},
			PickerChange(e) {
				this.index = e.detail.value
				
				if(this.index!=-1){
					this.queryAreadyAppointmentList();
				}
			},
			go(index){
				if(this.areadyAppointments.indexOf(this.time[index].name)>-1){
					uni.showToast({
						title: '此时间段已被预约',
						icon: "none"
					});
				}else{
					this.checkIndex=index;
				}

			},
			getServer(){
				var arr= {
							curr:1,
							pageSize:100
						};
					arr=JSON.stringify(arr)
					console.log(arr)
					this.$http({
						url: '/IWeiXinService.queryProjectList',
						method: 'post',
						data: arr
					}).then((res) => {
						console.log(res)
						if (res.code == '0') {
							var arr=[];
							for (var i = 0; i < res.data.length; i++) {
								arr.push(res.data[i].projectName)
							}
							this.picker=arr;
							
							this.queryAreadyAppointmentList();
						}
					}).catch((err) => {
						console.log(err)
					
					})
			},
			send(){
				if(uni.getStorageSync('user')==null || uni.getStorageSync('user')==''){
					uni.showToast({
						title: '请先登录',
						icon: "none"
					});
					return;
				}
if (this.id == -1) {
					uni.showToast({
						title: "请选择您要预约的睡眠师",
						icon: "none"
					})
					return;
				}

				if (this.serviceNameIndex == -1) {
					uni.showToast({
						title: "请选择您要预约的服务",
						icon: "none"
					})
					return;
				}

				if (this.serviceTimeIndex == -1) {
					uni.showToast({
						title: "请选择预约时间段",
						icon: "none"
					})
					return;
				}
				
				uni.showLoading({
					title:"提交中..."
				})
				var arr= {
					openId :uni.getStorageSync('user').openId,
							technicianId:this.id,
							technicianName:this.name,
							serviceName:this.picker[this.index],
							serviceTime:this.date + ' ' + this.swItemList[this.selectServicePage]['time'][this.serviceTimeIndex].name,
						};
				arr=JSON.stringify(arr)
				
				this.$http({
					url: '/IWeiXinService.appointmentAdd',
					method: 'post',
					data: arr
				}).then((res) => {
					uni.hideLoading();
					console.log(res)
					if (res.code == '0') {
						uni.showToast({title:'预约成功', icon:"none"});
						
						setTimeout(function(){
							uni.navigateBack()
						},2000)
					}else{
						console.log('预约错误'+res.msg);
						uni.showToast({title:res.msg, icon:"none"});
					}
				}).catch((err) => {
					console.log(err)
				uni.hideLoading();
				})
				
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.page{
	min-height: 100vh;
	width: 100%;
	
}	
.title{
	text-align: center;
	font-size:36rpx;
	font-family:PingFang SC;
	font-weight:bold;
	color:rgba(51,51,51,1);
}
	.picker{
		font-size:30rpx !important;
		font-family:PingFang SC !important;
		font-weight:400 !important;
		color:rgba(51,51,51,1) !important;
		text-align: left !important;
	}
	.date{
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(135,135,135,1);
	}
	.date_num{
		font-size:22rpx !important;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
	.time_list{
		width:190rpx;
		height:60rpx;
		line-height: 60rpx;
		background:rgba(226,226,226,1);
		border-radius:30rpx;
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(102,102,102,1);
		text-align: center;
	}
	.d-none{
		display: none;
	}
	.check{
		background:rgba(118,64,131,1);
		color: #fff;
	}
	
	.check1 {
		background: #AEEEEE;
		color: #fff;
	}
	
	.b-border{
		border-top: 1px solid rgba(229,229,229,1);
	}
	.cu-btn{
		background:rgba(117,62,130,1);
		width: 100%;
		color: #fff;
		letter-spacing: 5rpx;
	}
</style>
